<template>
	<div class="cr-contianer">
		<div class="title">{{ getTitle() }}</div>
		<div class="container">
			<div v-if="crmType == ''" class="cr-body-side">
				<div
					v-for="(item, index) in leftSides"
					:key="index"
					:class="
						leftType === item.type ? 'side-item-select' : 'side-item-default'
					"
					class="side-item"
					@click="sideClick(item)"
				>
					{{ item.name }}
				</div>
			</div>
			<div
				:style="{ 'padding-left': crmType == '' ? '150px' : '0' }"
				style="flex: 1 1"
			>
				<crm-relative-table
					v-for="(item, index) in leftSides"
					v-show="item.type == leftType"
					:key="index"
					:ref="'crm' + item.type"
					:show="show && item.type == leftType"
					:radio="radio"
					:footer="footer"
					:crm-type="item.type"
					:selected-data="currentSelectedData"
					:disabledRows="disabledRows"
					:action="action"
					:createable="createable"
					:query="query"
					@create="(data) => $emit('create', data)"
					@changeCheckout="checkCrmTypeInfos"
					:beforeFetchList="beforeFetchList"
				/>
			</div>
		</div>
		<div class="handle-bar">
			<el-button @click.native="closeView">取消</el-button>
			<el-button type="primary" @click.native="confirmClick">确定</el-button>
		</div>
	</div>
</template>

<script type="text/javascript">
import CrmRelativeTable from './CrmRelativeTable'
import { objDeepCopy } from '@/utils'

export default {
	name: 'CrmRelatieve', // 相关
	components: {
		CrmRelativeTable
	},
	provide() {
		return {
			crmRelative: this
		}
	},
	props: {
		/** 多选框 只能选一个 */
		radio: {
			type: Boolean,
			default: true
		},
		/** 新建按钮 是否显示 */
		createable: {
			type: Boolean,
			default: false
		},
		/** 没有值就是全部类型 有值就是当个类型 */
		crmType: {
			type: String,
			default: ''
		},
		/** 需要展示哪些类型 默认关键字数组 */
		showTypes: {
			type: Array,
			default: () => {
				return [
					'customer',
					'contacts',
					'leads',
					'business',
					'contract',
					'product',
					'program'
				]
			}
		},
		/** 已选信息 */
		selectedData: {
			type: Object,
			default: () => {
				return {}
			}
		},
		// 禁止操作勾选的行
		disabledRows: {
			type: Array,
			default: () => []
		},
		/** true 的时候 发请求 */
		show: {
			type: Boolean,
			default: true
		},
		/**
		 * default 默认  condition 固定条件筛选 moduleType 下的
		 * relative: 相关 添加
		 */
		action: {
			type: Object,
			default: () => {
				return {
					type: 'default',
					data: {}
				}
			}
		},
		// 表格底部额外信息
		footer: {
			type: Array,
			default: () => []
		},
		// 获取列表的查询条件
		query: Object,
		beforeFetchList: Function
	},
	data() {
		return {
			leftType: 'customer',
			leftSides: [],
			/** 各类型选择的值 */
			currentSelectedData: {}
		}
	},
	watch: {
		selectedData: function (data) {
			this.currentSelectedData = objDeepCopy(data)
		},
		// 刷新标记
		show(val) {
			if (val) {
				this.currentSelectedData = objDeepCopy(this.selectedData)
			}
		}
	},
	mounted() {
		var leftItems = {
			customer: {
				name: '客户',
				type: 'customer'
			},
			customerpersonal: {
				name: '客户',
				type: 'customerpersonal'
			},
			contacts: {
				name: '联系人',
				type: 'contacts'
			},
			relation: {
				name: '关系人',
				type: 'relation'
			},
			suppliercontacts: {
				name: '供应商联系人',
				type: 'suppliercontacts'
			},
			leads: {
				name: '意向',
				type: 'leads'
			},
			leadspersonal: {
				name: '意向(个人)',
				type: 'leadspersonal'
			},
			business: {
				name: '订单',
				type: 'business'
			},
			businesspersonal: {
				name: '订单(个人)',
				type: 'businesspersonal'
			},
			contract: {
				name: '保单',
				type: 'contract'
			},
			contractpersonal: {
				name: '保单(个人)',
				type: 'contractpersonal'
			},
			product: {
				name: '产品',
				type: 'product'
			},
			program: {
				name: '方案',
				type: 'program'
			},
			payable: {
				name: '应收帐款单',
				type: 'payable'
			},
			otherPayable: {
				name: '其他应收帐款单',
				type: 'otherPayable'
			},
			insurance: {
				name: '保险条款',
				type: 'insurance'
			},
			supplier: {
				name: '供应商',
				type: 'supplier'
			},
			person: {
				name: '伤者',
				type: 'person'
			},
			claim: {
				name: '理赔',
				type: 'claim'
			},
			channel: {
				name: '渠道',
				type: 'channel'
			},
			project: {
				name: '项目',
				type: 'project'
			}
		}
		if (this.crmType) {
			this.leftType = this.crmType
			this.leftSides.push(leftItems[this.crmType])
		} else {
			for (let index = 0; index < this.showTypes.length; index++) {
				const element = this.showTypes[index]
				this.leftSides.push(leftItems[element])
			}
		}
		this.currentSelectedData = objDeepCopy(this.selectedData)
	},
	methods: {
		sideClick(item) {
			this.leftType = item.type
		},
		clearAll() {
			if (this.crmType) {
				this.$refs['crm' + this.crmType][0].clearAll()
			}
		},
		// 	当用户手动勾选全选 Checkbox 时触发的事件
		selectAll() {},
		// 关闭操作
		closeView() {
			this.$emit('close')
		},
		checkCrmTypeInfos(data) {
			this.currentSelectedData[data.type] = data.data
		},
		// 确定选择
		confirmClick() {
			if (this.crmType) {
				// 以单类型传值
				this.$emit('changeCheckout', {
					data: this.currentSelectedData[this.crmType]
						? this.currentSelectedData[this.crmType]
						: []
				})
			} else {
				this.$emit('changeCheckout', { data: this.currentSelectedData })
			}

			this.$emit('close')
		},
		// 根据类型获取标题展示名称
		getTitle() {
			if (this.crmType == 'leads') {
				return '关联意向模块'
			} else if (this.crmType == 'customer') {
				return '关联客户模块'
			} else if (this.crmType == 'customerpersonal') {
				return '关联客户模块'
			} else if (this.crmType == 'supplier') {
				return '关联供应商模块'
			} else if (this.crmType == 'payable') {
				return '关联应收帐款单模块'
			} else if (this.crmType == 'otherPayable') {
				return '关联其他应收帐款单模块'
			} else if (this.crmType == 'contacts') {
				return '关联联系人模块'
			} else if (this.crmType == 'relation') {
				return '关联关系人模块'
			} else if (this.crmType == 'suppliercontacts') {
				return '关联供应商联系人模块'
			} else if (this.crmType == 'business') {
				return '关联订单模块'
			} else if (this.crmType == 'businesspersonal') {
				return '关联订单模块'
			} else if (this.crmType == 'product') {
				return '关联产品模块'
			} else if (this.crmType == 'program') {
				return '关联方案模块'
			} else if (this.crmType == 'contract') {
				return '关联保单模块'
			} else if (this.crmType == 'contractpersonal') {
				return '关联保单模块'
			} else if (this.crmType == 'insurance') {
				return '选择保险条款'
			} else if (this.crmType == 'person') {
				return '选择伤者'
			} else if (this.crmType == 'claim') {
				return '关联理赔模块'
			} else if (this.crmType == 'channel') {
				return '关联渠道模块'
			} else if (this.crmType == 'project') {
				return '关联项目模块'
			} else {
				return '关联业务模块'
			}
		}
	}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.cr-contianer {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 50px 0 0;
	height: 450px;
}

.title {
	padding: 0 20px;
	font-size: 16px;
	line-height: 50px;
	height: 50px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	border-bottom: 1px solid $xr-border-line-color;
}

.container {
	display: flex;
	flex-direction: column;
	position: relative;
	flex: 1 1 100%;
}

.handle-bar {
	height: 50px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	pointer-events: none;
	button {
		pointer-events: auto;
		float: right;
		margin-top: 10px;
		margin-right: 10px;
	}
}

.cr-body-side {
	flex-shrink: 0;
	z-index: 3;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 150px;
	font-size: 12px;
	background-color: white;
	height: 100%;
	border-right: 1px solid $xr-border-line-color;
	.side-item {
		height: 35px;
		line-height: 35px;
		padding: 0 20px;
		cursor: pointer;
	}
}

.side-item-default {
	color: #333;
}

.side-item-select {
	color: #409eff;
	background-color: #ecf5ff;
}
</style>
